<template>
  <div class="container">
    <!-- 标题 -->
    <div class="web-header">人员入库</div>
    <!-- 查询面板 -->
    <QueryPanel @query="handleQuery" @reset="handleReset" />
    <!-- 按钮组 -->
    <ButtonGroup
      :buttons="buttons"
      direction="horizontal"
      spacing="20px"
      border
      @click="handleButtonClick"
      @command="handleCommand"
    />
    <!-- 表格 -->
    <div class="table-container">
      <DataGrid
        :table-data="tableData"
        :columns="columns"
        :total="total"
        :table-props="tableProps"
        @update:page="handlePageChange"
        @update:size="handleSizeChange"
        @selection-change="handleSelectionChange"
      >
        <!-- 自定义列内容 -->
        <template #status="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? "启用" : "禁用" }}
          </el-tag>
        </template>
      </DataGrid>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import QueryPanel from "../components/QueryPanel.vue";
import DataGrid from "../components/DataGrid.vue";
import ButtonGroup from "@/components/ButtonGroup.vue";
import {
  Plus,
  Edit,
  Delete,
  Promotion,
  Download,
  Upload,
} from "@element-plus/icons-vue";

const buttons = ref<ButtonItem[]>([
  {
    i18nKey: "button.add",
    type: "primary",
    icon: Plus,
    // permission: "system:user:edit",
    event: "add",
  },
  {
    i18nKey: "button.edit",
    type: "primary",
    icon: Edit,
    // permission: "system:user:edit",
    event: "edit",
  },
  {
    text: "删除",
    type: "danger",
    icon: Delete,
    // permission: ["system:user:delete", "admin"],
    event: "delete",
    props: { plain: false },
  },
  {
    i18nKey: "button.import",
    type: "primary",
    icon: Upload,
    event: "import",
  },
  {
    i18nKey: "button.export",
    type: "primary",
    icon: Download,
    event: "export",
  },
  // {
  //   i18nKey: "button.share",
  //   type: "success",
  //   dropdown: true,
  //   items: [
  //     { label: "微信", command: "wechat" },
  //     { label: "QQ", command: "qq" },
  //   ],
  // },
]);

// 按钮事件
const handleButtonClick = ({ button }) => {
  console.log("触发按钮事件:", button.event);
};

// 命令事件
const handleCommand = ({ command }) => {
  console.log("收到命令:", command);
};

// 查询事件
const handleQuery = (queryParams: any) => {
  console.log("父组件接收到查询参数:", queryParams);
  // 在这里处理查询逻辑
};

// 重置事件
const handleReset = () => {
  console.log("父组件接收到重置操作");
  // 在这里处理重置逻辑
};

// 表格数据
const tableData = ref([
  { id: 1, name: "张三", age: 25, status: 1 },
  { id: 2, name: "李四", age: 30, status: 0 },
]);

// 表格列配置
const columns = ref([
  { prop: "id", label: "序号", width: "80" },
  { prop: "name", label: "姓名", width: "120" },
  { prop: "unit", label: "所属单位", width: "300" },
  { prop: "phone", label: "手机", width: "200" },
  { prop: "sex", label: "性别", width: "180" },
  { prop: "age", label: "年龄", width: "180" },
  { prop: "education", label: "学历", width: "200" },
  { prop: "education", label: "学位", width: "200" },
  { prop: "status", label: "状态", slot: "status" }, // 使用插槽自定义列内容
]);

// 分页总条数
const total = ref(100);

// 表格其他属性
const tableProps = ref({
  border: true,
  stripe: true,
  height: "100%", // 表格高度设置为 100%
});

// 分页变化
const handlePageChange = (page: number) => {
  console.log("当前页:", page);
  // 调用接口获取数据
};

const handleSizeChange = (size: number) => {
  console.log("每页条数:", size);
  // 调用接口获取数据
};

// 表格选中行
const handleSelectionChange = (selection: any[]) => {
  console.log("选中行:", selection);
};
</script>

<style scoped>
.web-header {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  padding: 0 16px;
  background: linear-gradient(145deg, #4a8cff, #0066ff);
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  border-bottom: 2px solid #3a7bdf;
}
/* 容器布局 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 容器占满整个视口高度 */
}

/* 表格容器 */
.table-container {
  flex: 1; /* 占满剩余高度 */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止内容溢出 */
}

/* 表格样式 */
:deep(.el-table) {
  flex: 1; /* 表格占满剩余高度 */
  display: flex;
  flex-direction: column;
}

:deep(.el-table__body-wrapper) {
  flex: 1; /* 表格内容区域占满剩余高度 */
  overflow: auto; /* 允许滚动 */
}

/* 分页样式 */
:deep(.el-pagination) {
  margin-top: 16px;
  padding: 0 16px;
}
</style>